import React, { useState, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams, useNavigate } from 'react-router-dom';
import Button from '../../components/Button';
import AgentForm, {
  AgentFormData,
} from '../../components/agentBuilder/AgentForm';
import AgentTester from '../../components/agentBuilder/AgentTester';
import { useAgentBuilder } from '../../hooks/agentBuilder/useAgentBuilder';
import useAgentBuilderList from '../../hooks/agentBuilder/useAgentBuilderList';
import { PiRobot as RobotIcon, PiArrowLeft as BackIcon } from 'react-icons/pi';

const AgentBuilderEditPage: React.FC = () => {
  const { t } = useTranslation();
  const { agentId } = useParams<{ agentId?: string }>();
  const navigate = useNavigate();

  // Single agent state management (for loading existing agent)
  const { agent, loading, error } = useAgentBuilder(agentId);

  // List operations (for create/update with optimistic updates)
  const { createAgent, updateAgent } = useAgentBuilderList();

  const isEditMode = Boolean(agentId);
  const [currentFormData, setCurrentFormData] = useState<AgentFormData | null>(
    null
  );

  const handleSave = useCallback(
    async (formData: AgentFormData) => {
      if (agentId && isEditMode) {
        await updateAgent(agentId, {
          name: formData.name,
          description: formData.description,
          systemPrompt: formData.systemPrompt,
          modelId: formData.modelId,
          mcpServers: formData.mcpServers as string[], // Explicit type assertion
          codeExecutionEnabled: formData.codeExecutionEnabled,
          isPublic: formData.isPublic,
          tags: formData.tags,
          agentId,
        });
        // Navigate back to agent chat page after editing
        navigate(`/agent-builder/${agentId}`);
      } else {
        console.log(
          'Creating agent with data:',
          JSON.stringify(formData, null, 2)
        );
        const newAgent = await createAgent({
          name: formData.name,
          description: formData.description,
          systemPrompt: formData.systemPrompt,
          modelId: formData.modelId,
          mcpServers: formData.mcpServers as string[], // Explicit type assertion
          codeExecutionEnabled: formData.codeExecutionEnabled,
          isPublic: formData.isPublic,
          tags: formData.tags,
        });
        if (newAgent) {
          console.log('Created agent:', JSON.stringify(newAgent, null, 2));
          // Navigate to agent list after creating new agent
          navigate(`/agent-builder/${newAgent.agentId}`);
        }
      }
    },
    [agentId, isEditMode, updateAgent, navigate, createAgent]
  ); // Remove function dependencies

  const handleCancel = useCallback(() => {
    if (agentId && isEditMode) {
      // Navigate back to agent chat page when canceling edit
      navigate(`/agent-builder/${agentId}`);
    } else {
      // Navigate to agent list when canceling create
      navigate('/agent-builder');
    }
  }, [navigate, agentId, isEditMode]);

  const handleFormDataChange = useCallback((formData: AgentFormData) => {
    setCurrentFormData(formData);
  }, []);

  const title = isEditMode
    ? t('agent_builder.edit_agent')
    : t('agent_builder.create_agent');

  // Loading state
  if (loading && isEditMode) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="flex flex-col items-center gap-4">
          <div className="border-aws-sky h-8 w-8 animate-spin rounded-full border-2 border-t-transparent"></div>
          <p className="text-sm font-medium text-gray-600">
            {t('common.loading')}
          </p>
        </div>
      </div>
    );
  }

  // Error state
  if (error) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="text-center">
          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
            <RobotIcon className="h-8 w-8 text-red-600" />
          </div>
          <h1 className="mb-4 text-xl font-semibold text-gray-900">{error}</h1>
          <Button onClick={handleCancel} outlined>
            <BackIcon className="mr-2 h-4 w-4" />
            {t('common.back')}
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto max-w-6xl px-4 py-8">
      {/* Header */}
      <div className="mb-6 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button outlined onClick={handleCancel}>
            <BackIcon className="mr-2 h-4 w-4" />
            {t('common.back')}
          </Button>
          <div>
            <h1 className="text-2xl font-bold text-gray-900">{title}</h1>
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
        {/* Agent Configuration */}
        <div className="space-y-6">
          <AgentForm
            initialData={agent || undefined}
            onSave={handleSave}
            onCancel={handleCancel}
            onFormDataChange={handleFormDataChange}
            loading={loading}
            error={error || undefined}
            isEditMode={isEditMode}
          />
        </div>

        {/* Agent Testing */}
        {(currentFormData || agent) && (
          <div className="space-y-6">
            <AgentTester
              agent={{
                // Use current form data if available, otherwise use existing agent data
                ...(currentFormData
                  ? {
                      agentId: agentId || 'temp-id',
                      name: currentFormData.name,
                      description: currentFormData.description,
                      systemPrompt: currentFormData.systemPrompt,
                      modelId: currentFormData.modelId,
                      mcpServers: currentFormData.mcpServers as string[],
                      codeExecutionEnabled:
                        currentFormData.codeExecutionEnabled,
                      isPublic: currentFormData.isPublic,
                      tags: currentFormData.tags,
                      isMyAgent: true,
                      createdAt: new Date().toISOString(),
                      updatedAt: new Date().toISOString(),
                      createdBy: 'current-user',
                      starCount: 0,
                    }
                  : {
                      ...agent!,
                      agentId: agentId || 'temp-id',
                      isPublic: false,
                      createdAt: new Date().toISOString(),
                      updatedAt: new Date().toISOString(),
                      createdBy: 'current-user',
                    }),
              }}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default AgentBuilderEditPage;
